<template>
	<view class="content">
		<view class="infobox">
			<view class="status">
				<text v-if="info.value.repairstatus==1">待处理</text>
				<text v-if="info.value.repairstatus==2">已派单</text>
				<text v-if="info.value.repairstatus==3">维修中</text>
				<text v-if="info.value.repairstatus==4">待验收</text>
				<text v-if="info.value.repairstatus==5">已完成</text>
				<text v-if="info.value.repairstatus==0">已取消</text>
				<text class="time">{{info.value.sumbittime}}</text>
			</view>
			<view class="list">
				<view class="title">
					报修人信息
				</view>
				<view class="item">
					<label>
						<image src="../../static/icon/name.png" class="icon"></image>
						姓名
					</label>
					<view style="width:28rpx;height: auto;">
					</view>
					<input :value="info.value.name" disabled />
				</view>
				<view class="item">
					<label>
						<image src="../../static/icon/phone.png" class="icon"></image>
						手机号
					</label>
					<input :value="info.value.phone" disabled />
				</view>
				<view class="title">
					报修信息
				</view>
				<view class="item">
					<label>
						<image src="../../static/icon/time.png" class="icon"></image>
						预约时间
					</label>
					<input :value="info.value.ordertime" disabled />


				</view>
				<view class="item">
					<label>
						<image src="../../static/icon/quyu.png" class="icon"></image>
						报修区域
					</label>
					<input :value="info.value.region" disabled />

				</view>
				<view class="item">
					<label>
						<image src="../../static/icon/location.png" class="icon"></image>
						详细地址
					</label>
					<input :value="info.value.address" disabled />
				</view>
				<view class="item">
					<label>
						<image src="../../static/icon/type.png" class="icon"></image>
						故障类型
					</label>
					<input :value="info.value.repairtype" disabled />
				</view>
				<view class="item">
					<label>
						<image src="../../static/icon/section.png" class="icon"></image>
						故障内容
					</label>
					<input :value="info.value.content" disabled />
				</view>

				<view class="photoitem">
					<view class="photo">
						<image src="../../static/icon/photo.png" class="icon"></image>
						故障照片
					</view>
					<view class="uploadBox">
						<view class="uploadimg"></view>
					</view>
				</view>

				<!--0：已取消  1：待处理  2：已派单 3：维修中 4：待验收 5：已完成  -->
				<template v-if="info.value.repairstatus>1">
					<view class="title">
						维修人员信息
					</view>
					<view class="item">
						<label style="margin-right:28rpx;">
							<image src="../../static/icon/gongren.png" class="icon"></image>
							维修人
						</label>
						<input :value="info.value.maintainername" disabled />
						<view class="box1" @click="goChat(info.value.maintainerId,info.value.maintainername)"> 
							<text class="button">
								在线联系
							</text>
						</view>
						
					</view>
					
					<!-- <view class="item">
						<label>
							<image src="../../static/icon/phone.png" class="icon"></image>
							手机号
						</label>
						<input :value="info.value.maintainerphone" disabled />
						<view class="box1" @click="goPhone(info.value.maintainerphone)">
							<text class="button">
								拨打电话
							</text>
						</view>
					</view> -->
					
				</template>




				<template v-if="info.value.repairstatus>3">
					<view class="title">
						维修结果信息
					</view>
					<view class="item">
						<label>
							<image src="../../static/icon/name.png" class="icon"></image>
							上报人<input style="padding-left: 30rpx;" :value="info.value.maintainername" disabled />
						</label>
					</view>
					<view class="item" style="border-bottom: none;display: block;">
						<label>
							<image src="../../static/icon/yijian.png" class="icon"></image>
							备注
						</label>
						<view class="textbox">
							<textarea v-model="info.value.result" disabled />
						</view>
					</view>
					<view class="uploadBox" style="margin-top: 20rpx;">
						<u-upload class="upload" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic"
							name="1" multiple :maxCount="10"></u-upload>
					</view>
				</template>






				<template v-if="info.value.repairstatus==4||info.value.repairstatus==5">
					<view class="title">
						验收信息
					</view>
					<view class="item" style="border-bottom: none;display: block;">
						<label>
							<image src="../../static/icon/name.png" class="icon"></image>
							验收人<input style="padding-left: 30rpx;" :value="info.value.acceptance" disabled />
						</label>
						<label>
							<image src="../../static/icon/yijian.png" class="icon"></image>
							验收意见
						</label>
						
						<view class="textbox">
							<textarea v-model="info.value.acceptanceidea" disabled />
						</view>
					</view>
				</template>
				
				<template v-if="info.value.repairstatus==5">
					<view class="title">
						维修评价
					</view>
					<view class="item" style="border-bottom: none;display: block;">
						
						<label>
							<image src="../../static/icon/yijian.png" class="icon"></image>
							评价意见
						</label>
						
						<view class="textbox">
							<textarea v-model="info.value.personevaluate" :disable="info.value.personevaluate==null" />
						</view>
					</view>
				</template>





			</view>
		</view>

		<view @click="isFast" class="box" style="background-color: #3B8AF4;" v-if="info.value.repairstatus==1||info.value.repairstatus==2">
			催单
		</view>

		<view @click="cancel" class="box" style="background-color: #F05C3E;" v-if="info.value.repairstatus==1||info.value.repairstatus==2">
			取消
		</view>


		<view @click="pinjia" class="box" style="background-color: #56dba4;" v-if="info.value.repairstatus==5&&info.value.personevaluate==null">
			评价
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import api from '@/api/api'
	let info = reactive({})
	onLoad((options) => {
		api.getRepairInfo({
			repairId: options.repairId,
		}).then(res => {
			info.value = res.data[0]
		})
	})
	onShow(() => {
		console.log(info)
	})
	const isFast=()=>{
		api.repairFast({
			repairId:info.value.repairId
		}).then(res=>{
			if(res.status==200){
				uni.showToast({
					icon:'none',
					duration:1500,
					title:res.msg
				})
			}
		})
	}
	const cancel=()=>{
		api.repairCancel({
			repairId:info.value.repairId
		}).then(res=>{
			if(res.status==200){
				uni.showToast({
					icon:'none',
					duration:1500,
					title:res.msg
				})
				setTimeout(function(){
					uni.navigateBack({
						delta:1
					})
				},1500)
				
			}
		})
	}
	
	const pinjia=()=>{
		api.repairIdea({
			repairId:info.value.repairId,
			personevaluate:info.value.personevaluate
		}).then(res=>{
			if(res.status==200){
				uni.showToast({
					title:'评价成功，请从新进入该页面',
					icon:'none',
					duration:1500
				})
			}
			
		})
		
	}
	
	
	const goChat = (toId,toName) => {
		uni.navigateTo({
			url: '/pages/news/chat?toName='+toName+'&toId='+toId
		})
	}
	
	const goPhone=(phone)=>{
		uni.makePhoneCall({
			phoneNumber: phone,
			success() {
				console.log('成功')
			},
			fail(err) {
				console.log(err)
			}
		});
	}
</script>

<style lang="scss">
	.content {
		.infobox {
			margin: 30rpx;

			.status {
				background-color: #F05C3E;
				color: white;
				padding: 20rpx 30rpx;
				border-top-left-radius: 16rpx;
				border-top-right-radius: 16rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.time {
					font-size: 24rpx;
				}
			}
		}

		.list {
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(131, 130, 130, 0.28);
			margin-bottom: 30rpx;
			background-color: white;
			padding: 0 30rpx 30rpx 30rpx;
			border-bottom-left-radius: 16rpx;
			border-bottom-right-radius: 16rpx;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				padding-top: 20rpx;
			}

			.item {
				label {
					padding-right: 30rpx;
					font-size: 28rpx;
					color: #666666;
					display: flex;
					align-items: center;

					.icon {
						width: 40rpx;
						height: 40rpx;
						padding-right: 5rpx;
					}
				}
				.box1{
					.button{
						font-size: 28rpx;
						color: #3B8AF4;
						border: #3B8AF4 1rpx solid;
						padding: 5rpx 10rpx;
						border-radius: 16rpx;
					}
				}
				

				input {
					flex: 1;
					font-size: 28rpx;
					color: #666666;
				}


				line-height: 100rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				border-bottom: #E6E6E6 1rpx solid;
				.textbox {
					display: block;
					border: #E6E6E6 1rpx solid;
					padding: 20rpx;
					border-radius: 16rpx;
				}
			}

			.photoitem {
				.photo {
					line-height: 100rpx;
					padding-right: 30rpx;
					font-size: 28rpx;
					color: #666666;
					display: flex;
					align-items: center;

					.icon {
						width: 40rpx;
						height: 40rpx;
						padding-right: 5rpx;
					}
				}

			}
			.uploadimg{
				width: 150rpx;
				height: 150rpx;
			}

		}

		.box {
			margin: 10rpx 30rpx;
			color: white;
			font-size: 28rpx;
			padding: 20rpx 0;
			text-align: center;
			border-radius: 16rpx;
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(131, 130, 130, 0.28);
		}
	}
</style>
